<template>
  <el-dialog title="模板导入" :closeOnClickModal="false" :visible.sync="show" width="650px" :close-on-press-escape="false">
    <el-form label-position="right" :model="selectTable" ref="addForm" label-width="80px" autocomplete="off" size="medium">
      <el-form-item label="名称" prop="file" :rules="[rule[0]]">
      <div class="file">
        <el-input placeholder="请选择zip压缩包" v-model="selectTable.file"></el-input>
        <input type="file" class="btn" @change="selectTable.file=$event.target.value" ref="file">
      </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" v-loading="pload">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" @click="submitForm('addForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>
<style lang="scss" scoped>
    .file {
      position: relative;
      overflow: hidden;
      .btn {
        opacity: 0;
        position: absolute;
        top: -20px;
        bottom: -20px;
        left: 0;
        width: 100%;
        background: #f00;
      }
    }
</style>

<script>
import * as api from '@/utils/api'

export default {
  components: {
  },
  props: {
  },
  data() {
    return {
      selectTable: {
        file: null
      },
      pload: false,
      show: true,
      rule: [
        { required: true, message: '必填项', trigger: 'blur' }
      ]
    }
  },
  watch: {
    show(newVal) {
      this.$parent.inZip = false
    }
  },
  methods: {
    async submitForm() {
      this.$confirm('确认要导入吗', { type: 'warning' }).then(async() => {
        try {
          this.pload = true
          var file = this.$refs.file.files[0]
          await api.templetInZip({
            file: file
          }, 'upload')
          this.$notify({ title: '导入成功', type: 'success', duration: 3000 })
          this.$emit('getData')
          this.$parent.inZip = false
        } catch (e) {
          console.log(e)
        }
        this.pload = false
      })
    }
  }
}
</script>